<template>
    <div>
    <head-top></head-top>

    <div class="latestInfo table_container">

        <el-form :inline="true" :model="formInline" class="demo-form-inline" ref="formInline">
            <el-form-item label="咨询名称" prop="title">
                <el-input v-model="formInline.title" placeholder="请输入咨询名称"></el-input>
            </el-form-item>
            <el-form-item label="资讯来源" prop="source">
                <el-input v-model="formInline.source" placeholder="请输入资讯来源"></el-input>
            </el-form-item>
            <el-form-item label="责任编辑" prop="editor">
                <el-input v-model="formInline.editor" placeholder="请输入责任编辑"></el-input>
            </el-form-item>
            <el-form-item label="发布时间" prop="publish_time_str">
                <el-col>
                    <el-date-picker type="date" placeholder="选择日期" v-model="formInline.publish_time_str" style="width: 100%;"></el-date-picker>
                </el-col>
            </el-form-item>
        </el-form>

        <div class="but-group">
            <el-button  type="primary" @click="dialogFormVisible = true">新增</el-button>
            <el-button  type="primary">搜索</el-button>
            <el-button  type="primary" @click="resetForm('formInline')">重置</el-button>
        </div>

        <el-table
            :data="tableData"
            style="width: 100%;margin-top: 20px">
            <el-table-column
                prop="id"
                label="序号"
                width="180">
            </el-table-column>
            <el-table-column
                prop="title"
                label="咨询名称"
                width="180">
            </el-table-column>
            <el-table-column
                prop="source"
                label="资讯来源">
            </el-table-column>
            <el-table-column
                prop="editor"
                label="责任编辑">
            </el-table-column>
            <el-table-column
                prop="publish_time_str"
                label="发布日期">
            </el-table-column>
            <el-table-column
                label="操作">
                <template slot-scope="scope">
                    <el-button type="text" size="small" @click="handleDelete(scope.$index, scope.row, tableData)">删除</el-button>
                    <el-button type="text" size="small">发布</el-button>
                    <el-button type="text" size="small" @click="modifyact(scope.$index, scope.row)">详情查看</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="Pagination" style="text-align: left;margin-top: 10px;">
            <el-pagination
                :current-page="currentPage"
                :page-size="20"
                layout="total, prev, pager, next"
                :total="count">
            </el-pagination>
        </div>
    </div>
        <el-dialog title="资讯编辑" :visible.sync="dialogFormVisible">
            <el-form :inline="true" :rules="rulesform" :model="form" class="demo-form-inline" ref="form" label-width="80px">
                <el-form-item label="咨询名称" prop="title">
                    <el-input v-model="form.title" placeholder="请输入咨询名称"></el-input>
                </el-form-item>
                <el-form-item label="资讯来源" prop="source">
                    <el-input v-model="form.source" placeholder="请输入咨询来源"></el-input>
                </el-form-item>
                <el-form-item label="发布时间" prop="publish_time_str">
                    <el-date-picker placeholder="选择日期" v-model="form.publish_time_str" width="100px"></el-date-picker>
                </el-form-item>
                <el-form-item label="责任编辑" prop="editor">
                    <el-input v-model="form.editor" placeholder="请输入责任编辑"></el-input>
                </el-form-item>
                <el-col :span="24">
                    <el-form-item label="文本内容" prop="content">
                        <el-input type="textarea" v-model="form.content" placeholder="请输入内容" style="width: 450px"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                <el-form-item label="图片">
                    <el-upload
                        v-model="form.img"
                        class="upload-demo"
                        action="https://jsonplaceholder.typicode.com/posts/"
                        multiple
                        :limit="3"
                        :file-list="fileList1">
                        <el-button size="small" type="primary">点击上传</el-button>
                    </el-upload>
                </el-form-item>
                </el-col>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false,resetForm('form')">取 消</el-button>
                <el-button type="primary" @click="innerVisible = true">预览</el-button>
                <el-button type="primary" @click="resetForm('form')">重置</el-button>
                <el-button type="primary" @click="dialogFormVisible = false">保存</el-button>
            </div>
        </el-dialog>
        <el-dialog title="查看详情" :visible.sync="dialogForm2Visible">
            <el-form :model="detail" ref="detail" label-width="80px">
                <el-form-item label="文本内容" prop="content">
                    <el-input type="textarea" v-model="detail.content" style="width: 450px" rows="7" disabled></el-input>
                </el-form-item>
            </el-form>
        </el-dialog>
        <el-dialog title="预览" :visible.sync="innerVisible">
            <div class="page_info">
                <div class="infoBoxContainer">
                    <div class="info_detail scrollYContain">
                        <p class="infod_title">{{form.title}}</p>
                        <div class="tips_infod_div">
                            <span class="tips_infod_title">来源：<span class="fontColor">{{form.source}}</span></span>
                            <span class="tips_infod_date">{{form.publish_time_str}}</span>
                        </div>
                        <div class="infod_text">{{form.content}}</div>
                    </div>
                </div>
            </div>
        </el-dialog>
    </div>
</template>
<script>
    import headTop from '@/components/headTop'

    export default {
        data() {
            return {
                rulesform: {
                    title: [
                        { required: true, message: '咨询名称不能为空', trigger: 'blur' }
                    ],
                    source: [
                        { required: true, message: '咨询来源不能为空', trigger: 'blur' }
                    ],
                    editor: [
                        { required: true, message: '责任编辑不能为空', trigger: 'blur' }
                    ],
                    publish_time_str: [
                        { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
                    ]
                },
                formInline: {
                    title: '',
                    source: '',
                    editor: '',
                    publish_time_str: ''
                },
                tableData: [{
                    "id": 2,
                    "title": "美的2018AWE",
                    "source": "网易",
                    "publish_time_str": "2018-03-22 16:36:56",
                    "editor": "记者",
                    "content": "今年美的首次携消费电器、暖通空调、机器人与自动化系统、智能供应链（物流）四大板块共同参展，展位面积达到了5000平方米，从全品牌、全方位出发为大众奉上了一场“人机新世代”的科技盛宴，吸引了众多观众参观。"
                },
                {
                    "id": 1,
                    "title": "美的开工利是",
                    "source": "南方+",
                    "publish_time_str": "2018-02-23 15:54:28",
                    "editor": "记者",
                    "content": "从全品牌、全方位出发为大众奉上了一场“人机新世代”的科技盛宴，吸引了众多观众参观。今年美的首次携消费电器、暖通空调、机器人与自动化系统、智能供应链（物流）四大板块共同参展，展位面积达到了5000平方米，"
                }],
                dialogTableVisible: false,
                dialogFormVisible: false,
                dialogForm2Visible: false,
                innerVisible: false,
                form: {
                    title: '',
                    source: '',
                    publish_time_str: '',
                    editor: '',
                    url: '',
                    img: '',
                    content: ''
                },
                detail: {
                    content: ''
                },
                fileList1: [],
                limit: 20,
                count: 2,
                currentPage: 1,
            }
        },
        components: {
            headTop
        },
        methods: {
//            重置
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
//            修改
            modifyact (index, row) {
                this.dialogForm2Visible = true
                this.detail = Object.assign({}, row)
            },
//            删除行
            async handleDelete(index, row, data1) {
                this.$confirm('此操作将永久删除, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    data1.splice(index, 1)
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
        }
    }
</script>

<style lang="less">
    @colorD19F14: #d19f14;

    .table_container{
        padding: 20px;
    }
    .info_detail{
        font-size: 16px;
    .infod_title{
        padding: 19px 15px 5px;
        line-height: 22px;
        font-size: 18px;
        font-weight: 600;
    }
    .tips_infod_div{
        padding: 14px 15px;
        font-size: 13px;
        color: #b4b4b4;
    .fontColor{
        color: @colorD19F14;
    }
    .tips_infod_date{
        margin-left: 2px;
    }
    }
    .infod_text{
        padding: 16px 15px;
        font-size: 14px;
        text-indent: 28px;
        line-height: 22px;
    }
    }
</style>
